<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/common.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta charset="utf-8">
    <title>缴费管理界面</title>
    <link rel="stylesheet" href="<%=path %>/plugins/layui/css/layui.css" media="all">
  </head>
  
    <script src="<%=path%>/plugins/layui/layui.js"></script>

<body>
	<!-- 搜索模块 -->
	<div class="demoTable" style="margin-top:7px;margin-left:50px">
	  <div class="layui-inline layui-icon layui-icon layui-icon-search" 
	     style="font-size: 20px; color: #2B2B2B;font-weight:bold">模糊搜索：
	  </div>
	  
	  <div class="layui-inline">
	    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
	  </div>
	  
	  <span class="layui-badge-dot"></span>
	  
      <div class="layui-inline layui-icon layui-icon layui-icon-release" 
	     style="font-size: 20px; color: #2B2B2B;font-weight:bold"> 时间段查询：
	  </div>
	  
      <div class="layui-input-inline">
        <input type="text" class="layui-input" style="width: 330px" id="time" placeholder="  开始 到 结束 ">
      </div>
      
	  <button class="layui-btn" data-type="reload">搜索</button>
	  <sec:authorize ifAnyGranted="studentAdd">
		  <!-- 小圆点 -->
		  <span style="margin-left: 50px">
			  <span class="layui-badge-dot"></span>
			  <span class="layui-badge-dot layui-bg-orange"></span>
			  <span class="layui-badge-dot layui-bg-green"></span>
			  <span class="layui-badge-dot layui-bg-cyan"></span>
			  <span class="layui-badge-dot layui-bg-blue"></span>
			  <span class="layui-badge-dot layui-bg-black"></span>
			  <span class="layui-badge-dot layui-bg-gray"></span>	
		  </span>	  
	  </sec:authorize>
	  <button class="layui-btn layui-btn-warm" id="btn">导出excel表格</button>

	</div>
	<div class="table-responsive table2excel" data-tableName="Test Table 1">
		<!-- 表格体 lay-filter相当于id -->
		<table id="stuTable" lay-filter="tableDemo"></table>
	</div>

</body>

<script>
	//调用模块
	layui.use(['table','jquery','laydate','laytpl','element'], function(){
	  var table = layui.table;
	  var laydate = layui.laydate;
	  var $ = layui.jquery;
	  var laytpl = layui.laytpl;
	  var element = layui.element;
	 
	  //时间范围
	  laydate.render({
	  	elem: '#time',
	  	type: 'datetime',
	  	range: '至',
	  	done: function(value){
	  	
	  	}
	  });
		  
	  //定义属性
	  table.render({
	    elem: '#stuTable'//关联表格
	    ,url: '<%=path%>/biz/Fee_getByPager.action' //数据接口
	    ,page: true //开启分页
	    ,cols: [[ //表头
	       {type:'numbers'}
	      ,{field: 'stuName', title: '姓名', align:'center', width: 100, sort:true, templet: function(data){
	      	    var color = "#D2691E";
	      		return '<span style="font-weight: bold ;color: '+color+';">'+data.stuName+'</span>';
	      }}
	      ,{field: 'regId', title: '挂号编号', width: 120, align:'center', sort: true}
	      ,{field: 'medFee', title: '药品费用', width: 100, align:'center', sort: true}
	      ,{field: 'standFee', title: '治疗标准费用', width: 100, align:'center', sort: true}
	      ,{field: 'feeTotal', title: '总费用', width: 100, align:'center', templet: function(data){
	      		var color = "#CD2626";
	      		return '<span style="font-weight: bold ;color: '+color+';">'+data.feeTotal+'</span>';
	      }, sort: true}
	      ,{field: 'feePut', title: '已缴费用', width: 100, align:'center', templet: function(data){
	      		var color = "#698B22";
	      		return '<span style="font-weight: bold ;color: '+color+';">'+data.feePut+'</span>';
	      },sort: true}
	      ,{field: 'feeNeed', title: '待缴费用', width: 120, align:'center', templet: function(data){
	      		var color = "#6959CD";
	      		return '<span style="font-weight: bold ;color: '+color+';">'+data.feeNeed+'</span>';
	      }, sort: true}
	  	  ,{field: 'progress', title: '缴费进度', align:'center', templet: function(d){
	  	  		var color = '';
	  	  		var progress = '';
	  	  		//缴清 未缴清 多缴
	  	  		if(d.feeNeed == 0){
	  	  			color = "greed";
	  	  			progress = "100";
	  	  		} else if(d.feeNeed > 0){
	  	  			color = "blue";
	  	  			if(d.feePut == 0){
	  	  				progress = "0";
	  	  			}else{
	  	  				var s = ((d.feePut/d.feeTotal)*100).toFixed(2);
	  	  				progress = s;
	  	  			}
	  	  		} else if(d.feeNeed < 0){
	  	  				var s = ((d.feePut/d.feeTotal)*100).toFixed(2);
	  	  				progress = s;
	  	  				color = "orange";
	  	  		}
	  	  		
				return '<div class="layui-progress layui-progress-big" lay-showPercent="true"><div class="layui-progress-bar layui-bg-'+color+'" lay-percent="'+progress+'%"></div></div>'
	      }, sort: true}
	      ,{field: 'status', title: '状态', width: 100, align:'center', templet : function(d){
	      	//函数转义 自定义列模板
	      	var statuss;
	      	var color;
	      	switch(d.status){
	      	case 0:
	      		color = '#575757';
	      		statuss = '未缴清';break;
	      	case 1:
	      		color = '#0000FF';
	      		statuss = '已缴清';break;
	      	case 2:
	      		color = '#CD0000';
	      		statuss = '缴费溢出';break;
	      	}
	      	return '<span style="font-weight: bold ;color: '+color+';">'+statuss+'</span>';
	      }, sort: true}
	      ,{field: 'operate', title: '操作', width: 150, field: "right", align:'center', toolbar: '#barDemo'}//这里的toolbar值是模板元素的id选择器
	    ]]
	    ,id: 'testReload'
	    ,height: 'full-80' //分页块与表格之间的距离
	    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度
		,done: function(){
			element.init();
		}
	  });
	  
	  //表格数据重载
	  active = {
	    reload: function(){
	      var demoReload = $('#demoReload');
	      //执行重载
	      table.reload('testReload', {
	        page: {
	          curr: 1 //重新从第 1 页开始
	        }
	        ,where: {
	        	stuDesc: demoReload.val(),
	        	timeSection: trimTime($('#time').val())
	        }
	      });
	    }
	  };
	  $('.demoTable .layui-btn').on('click', function(){
	    var type = $(this).data('type');
	    active[type] ? active[type].call(this) : '';
	  });
	  
	  //监听工具条
	  table.on('tool(tableDemo)', function(obj){
	    //获取data属性
	    var data = obj.data;
	    if(obj.event === 'del'){
	      layer.confirm('真的删除行么', function(index){
	      	$.ajax({
	      		url: '<%=path%>/biz/Student_delete.action',
	      		type: 'GET',
	      		data: {"regId":data.regId},
	      		dataType: 'json',
	      		success: function(data){
	      			var json = eval("("+data+")");
	      			if(json.isSucceed){
	      				message("删除成功");
	      				//删除页面记录
	      				obj.del();
	      				
	      			}else{
	      				message("删除失败~不解释");
	      			}
	      		},
	      		error: function(data){
	      			layer.msg("请求失败");
	      		}
	      	});
	      	//关闭弹窗
	        layer.close(index);
	      });
	    } else if(obj.event === 'edit'){
	       //获取挂号编号
	       var status = data.status;
	       if(status == 1){
	       		message("此同学已缴清费用");
	       		return;
	       } else if(status == 2){
	       		message("此同学已破产")
	       		return;
	       }
			layer.prompt({
			formType: 0,
			value: '',
			title: '请输入缴费金额',
			area: ['800px', '350px'] //自定义文本域宽高
			}, function(value, index, elem){
		　　   var re = /^[1-9]\d*\,\d*|[1-9]\d*$/;
		　　   if (!re.test(value)) { 
		　　　　layer.alert("请正确输入金额");
			  return;
		　　   }
		
			$.ajax({
				url: '<%=path%>/biz/Fee_pay.action'
				,type: 'POST'
				,data: {"regId": data.regId, "payFee": value}
				,dataType: 'JSON'
				,success: function(data){
	      			var json = eval("("+data+")");
	      			if(json.isSucceed){
				      layer.open({
				        content: '<div style="padding: 20px 100px;">缴费成功</div>'
				        ,btn: '朕知道啦'
				        ,btnAlign: 'c' //按钮居中
				        ,shade: 0 //不显示遮罩
				        ,yes: function(){
				            location.href = "<%=path%>/biz/Fee_feeList.action";
				        }
				      });
	      			}else{
	      				layer.msg("缴费失败");
	      			}
				}
				,error: function(data){
					layer.msg("请求失败");
				}
				
			});
		});

	    } else if(obj.event === "pay"){
	            layer.open({
	                title: false,
	                type: 1,
	                content: '<img src="http://timodong.cn/AttendanceSystem1/img/wx.png" />',
	                area: ['332px', '330px'],
	                shadeClose: true
	            });
	    }
	  });
	  
	});
	
  //信息提示弹出层
  function message(data){
      layer.open({
        content: '<div style="padding: 20px 100px;">'+ data +'</div>'
        ,btn: '朕知道啦'
        ,btnAlign: 'c' //按钮居中
        ,shade: 0 //不显示遮罩
        ,yes: function(){
          layer.closeAll();
        }
      });
  }


//为时间段加点杂碎并返回，防止被同化
function trimTime(strDate) { 
    if(null==strDate || ""==strDate){  
        return "";  
    }
    return "+"+strDate;
};


  </script>


<script type="text/html" id="barDemo">
	<sec:authorize ifAnyGranted="feeUpdate">
  	<a class="layui-btn layui-btn-xs" lay-event="edit">缴费</a>
	</sec:authorize>
  	<a class="layui-btn layui-btn-xs" lay-event="pay">微信支付</a>
</script>

<script>window.jQuery || document.write('<script src="<%=path%>/excel/jquery-1.11.0.min.js"><\/script>')</script>	
<script src="<%=path%>/excel/jquery.table2excel.js"></script>

<script>
	$(function() {
		$("#btn").click(function(){
			$(".table2excel").table2excel({
				// 不被导出的表格行的CSS class类
				exclude: ".noExl",
				// 导出的Excel文档的名称，（没看到作用）
				name: "挂号表",
				// Excel文件的名称
				filename: "学生挂号表",
				exclude_img: true,
				exclude_links: true,
				exclude_inputs: true
			});
		});
	});
</script>
</html>
